<!--  -->
<template>
	<div class="md-input" :class="className">
		<div class="md-input__control">
			<div class="md-input__slot">
				<fieldset><legend :style="{width:legendWidth}"><span>&ZeroWidthSpace;</span></legend></fieldset>
				<div class="md-field__slot">
					<label ref="labelRef" class="md-field__label">{{placeholder}}</label>
					<input :type="type" v-model="inputValue" class="md-field__input" @focus="handleFocus" @blur="handleBlur"/>
				</div>
			</div>
			<div class="md-field__details">
				<div class="md-messages">
					<div class="md-messages__wrapper"></div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "MdInput",
	//import引入的组件需要注入到对象中才能使用
	components: {},
	props:{
		value: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: 'text'
		},
		size: {
			type: String,
			default: 'medium',
		},
		placeholder: {
			type: String,
			default: ''
		},
		bgPlaceholder: {
			type: String,
			default: 'transparent'
		},
		bgColor: {
			type: String,
			default: 'transparent'
		},
		showLine: {
			type: Boolean,
			default: true
		},
		lineWeight:{
			type: Number,
			default: 1
		},
		lineColor:{
			type: String,
			default: '#1890ff'
		}
	},
	data() {
		//这里存放数据
		return {
			inputValue: this.value,
			legendWidth: "0px",
			isFocus: false,
			isError: false
		};
	},
	//监听属性 类似于data概念
	computed: {
		lineStyle(){
			return {
				"--lh": this.lineWeight + 'px',
				"--color": this.lineColor
			}
		},
		className(){
			let className = [];
			className.push('md-input--'+this.size);
			if(this.isFocus){
				className.push('md-input--focused');
			}
			if(this.isError){
				className.push('md-input--error');
			}
			return className;
		}
	},
	//监控data中的数据变化
	watch: {
		inputValue: {
			handler(val){
				this.$nextTick(() => {
					if(val){
						this.handleFocus()
					}
				})
			},
			deep: true,
			immediate: true
		},
	},
	//生命周期 - 创建完成（可以访问当前this实例）
	created() {

	},
	//生命周期 - 挂载完成（可以访问DOM元素）
	mounted() {
		console.log(this.$attrs)
	},
	beforeCreate() {}, //生命周期 - 创建之前
	beforeMount() {}, //生命周期 - 挂载之前
	beforeUpdate() {}, //生命周期 - 更新之前
	updated() {}, //生命周期 - 更新之后
	beforeDestroy() {}, //生命周期 - 销毁之前
	destroyed() {}, //生命周期 - 销毁完成
	activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
	//方法集合
	methods: {
		handleFocus(){
			this.legendWidth = this.$refs.labelRef.offsetWidth + "px";
			this.isFocus = true;
		},
		handleBlur(){
			if(!this.inputValue){
				this.legendWidth = "0px";
				this.isFocus = false;
			}
			this.$parent.$emit("el.form.blur");
		}
	}
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.md-input{
	display: flex;
    flex-direction: column;
    height: auto;
    flex-grow: 1;
    flex-wrap: wrap;
    min-width: 0;
    width: 100%;

	.md-input__control{
		display: flex;
		flex-direction: column;
		height: auto;
		flex-grow: 1;
		flex-wrap: wrap;
		min-width: 0;
		width: 100%;
		border-radius: 4px;
		color: rgba(0,0,0,.87);
	}

	.md-input__slot{
		color: inherit;
		display: flex;
		position: relative;
		width: 100%;
		border-radius: inherit;
	    cursor: text;
    	transition: background .3s cubic-bezier(.25,.8,.5,1);
		align-items: stretch;
		background: transparent;
		margin-bottom: 4px;
	    min-height: 40px;
		padding: 0 12px;
	}

	fieldset{
		border-collapse: collapse;
		border: 1px solid;
		bottom: 0;
		left: 0;
		pointer-events: none;
		position: absolute;
		right: 0;
		top: -5px;
		transition-duration: .3s;
		transition-property: color,border-width;
		transition-timing-function: cubic-bezier(.25,.8,.25,1);
		padding:0;
		padding-left: 8px;
		color: rgba(0,0,0,.38);
		border-radius: inherit;

		legend{
			border: 0;
			color: inherit;
			display: table;
			max-width: 100%;
			white-space: normal;
			line-height: 11px;
			padding: 0;
			transition: width .3s cubic-bezier(.25,.8,.5,1);
			text-align: left;
		}
	}
	.md-field__slot{
		display: flex;
		flex: 1 1 auto;
		position: relative;
		align-items: center;

		.md-field__label{
			left: 0px;
			right: auto;
			position: absolute;
			transform-origin: top left;
			color: rgba(0,0,0,.6);
			height: 20px;
			line-height: 20px;
			max-width: 90%;
			overflow: hidden;
			text-overflow: ellipsis;
			top: 0;
			bottom: 0;
			margin: auto;
			white-space: nowrap;
			pointer-events: none;
			transition: all .3s cubic-bezier(.25,.8,.5,1);
		}
		input{
			flex: 1 1 auto;
			line-height: 20px;
			padding: 8px 5px;
			max-width: 100%;
			min-width: 0;
			width: 100%;
			max-height: 32px;
			color: rgba(0,0,0,.87);
			border: 0 none;
			background-color: transparent;
		}
	}
	&.md-input--focused{
		fieldset{
			border-width: 2px;
			border-color: #1890ff;
		}
		.md-field__label{
			transform: translateX(5px) translateY(-16px) scale(0.75);
			color:#1890ff;
		}
		input{
			color: #1890ff;
		}
	}
	&.md-input--error{
		fieldset{
			border-color: #eb4444;
		}
		.md-field__label{
			color:#eb4444;
		}
		input{
			color: #eb4444;
		}
	}
	.md-field__details{
		display: flex;
		flex: 1 0 auto;
		max-width: 100%;
		min-height: 14px;
		overflow: hidden;
		padding: 0 12px;
		margin-bottom: 8px;
		.v-messages{
			flex: 1 1 auto;
			font-size: 12px;
			min-height: 14px;
			min-width: 1px;
			position: relative;
			color: rgba(0,0,0,.6);
			text-align: left;
		}
	}
}
</style>